import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Table, Input, Icon, Label } from 'semantic-ui-react'
import Styled from 'styled-components'
import { BasicButton, PrimaryButton } from 'components/Button'
import { validForm as validFormDuck } from 'ducks'
import QueryField from './queryField'

const SectionRow = Styled.div`
  margin-bottom: 1em;
`
class SwitchButtonsView extends Component {
  state = {}

  componentDidMount() {
    const {
      options, actionInitField, name, required, init, fieldInitValue,
    } = this.props
    if (init === undefined) {
      actionInitField({
        name,
        value: [],
        state: 'success',
        required,
      })
    } else {
      actionInitField({
        name,
        value: fieldInitValue,
        state: 'success',
        required,
      })
    }
  }

  enumValueInputChange = (e, { value }) => this.setState({ enumInputValue: value })

  render() {
    const {
      header,
      description,
      options,
      submit,
      field,
      name,
      value,
      actionFieldChange,
    } = this.props
    const { enumInputValue } = this.state
    const duValue = value ? value.includes(enumInputValue) : false
    return (
      <Table.Row>
        <Table.Cell width="4" verticalAlign="top">
          {header}
        </Table.Cell>
        <Table.Cell>
          <SectionRow>{description}</SectionRow>
          <SectionRow>
            {field && value && value.length > 0 && (
              <Table basic="very" collapsing>
                <Table.Body>
                  {value.map((row, i) => (
                    <Table.Row>
                      <Table.Cell>{row}</Table.Cell>
                      <Table.Cell>
                        <Icon
                          style={{ cursor: 'pointer' }}
                          name="remove"
                          color="red"
                          onClick={() => {
                            const arr = [...value]
                            arr.splice(i, 1)
                            actionFieldChange(name, arr)
                          }}
                        />
                      </Table.Cell>
                    </Table.Row>
                  ))}
                </Table.Body>
              </Table>
            )}
          </SectionRow>
          <SectionRow>
            <Input
              action={{
                color: 'blue',
                labelPosition: 'right',
                icon: 'add',
                content: '添加',
                onClick: () => {
                  actionFieldChange(name, [...value, enumInputValue])
                  this.setState({ enumInputValue: '' })
                },
                disabled: duValue
              }}
              actionPosition="right"
              placeholder="请输入值..."
              onChange={this.enumValueInputChange}
              value={enumInputValue}
            />
            {
              duValue && (
                <Label basic color='red' pointing='left'>
                  重复的值
                </Label>
              )
            }
          </SectionRow>
          {submit && (
            <SectionRow>
              <BasicButton content="取消" />
              <PrimaryButton content="保存" primary />
            </SectionRow>
          )}
        </Table.Cell>
      </Table.Row>
    )
  }
}

const mapStateToProps = (state, ownProps) => ({
  field: validFormDuck.selectors.field(state, ownProps.name),
  value: validFormDuck.selectors.fieldValue(state, ownProps.name),
  fieldInitValue: validFormDuck.selectors.fieldInitValue(state, ownProps.name),
})

const mapDispatchToProps = {
  actionInitField: validFormDuck.creators.actionInitField,
  actionFieldChange: validFormDuck.creators.actionFieldChange,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(QueryField(SwitchButtonsView, options => ({ options })))
